<template>
  <div class="dashboard-container">
    <div class="app-container">
      <template>
        <el-tabs v-model="activeName">
          <el-tab-pane label="角色管理" name="first">
            <!-- 左侧的tab栏 -->
            <el-row style="height: 50px">
              <el-button
                type="primary"
                size="small"
                icon="el-icon-plus"
                @click="addFn"
              >新增角色</el-button>
            </el-row>

            <!-- 表格 -->
            <el-table
              :data="tableData"
              style="width: 100%"
              :header-cell-style="headerClass"
              :cell-style="cellClass"
              border
            >
              <el-table-column type="index" label="序号" width="140" />
              <el-table-column prop="name" label="角色" width="200" />
              <el-table-column prop="description" label="描述" />
              <el-table-column label="操作">
                <template v-slot="{ row}">
                  <el-button @click="callotFn(row.id)">分配权限</el-button>
                  <el-button
                    type="primary"
                    @click="setFn(row)"
                  >编辑</el-button>
                  <el-button
                    type="danger"
                    @click="reomveFn(row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 底部分页 -->
            <el-row type="flex" justify="end">
              <div class="block">
                <el-pagination
                  :page-size="pagesize"
                  :total="total"
                  :current-page.sync="page"
                  layout="prev, pager, next"
                  @current-change="currentFn"
                />
              </div>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="公司信息" name="second">
            <!-- 右侧tab栏 -->
            <el-alert
              type="info"
              description="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
              show-icon
            />
            <el-form
              ref="formDate"
              :model="formDate"
              :label-width="formLabelWidth"
              style="margin-top: 30px; width: 520px"
              disabled
            >
              <el-form-item label="公司名称">
                <el-input v-model="formDate.name" />
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input v-model="formDate.companyAddress" />
              </el-form-item>
              <el-form-item label="公司电话">
                <el-input v-model="formDate.companyPhone" />
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  v-model="formDate.remarks"
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 6 }"
                />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </template>

      <!-- 对话框 -->
      <el-dialog :title="title" :visible.sync="dialogTableVisible">
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item
            prop="name"
            label="角色名称"
            :label-width="formLabelWidth"
          >
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="角色描述" :label-width="formLabelWidth">
            <el-input v-model="form.description" autocomplete="off" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancleFn">取 消</el-button>
          <el-button type="primary" @click="submitFn">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 权限节点对话框 -->
      <el-dialog :title="title" :visible.sync="dialogVisible">
        <el-tree
          ref="Eltree"
          :data="data"
          show-checkbox
          default-expand-all
          node-key="id"
          :props="defaultProps"
          :default-checked-keys="defaultData"
          check-strictly
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancleFn">取 消</el-button>
          <el-button type="primary" @click="footerFn">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getrolesAPI, removeroleAPI, addroleAPI, getrolrAPI, companyAPI, updataroleAPI, permissionAPI, assignPremAPI } from '@/api/setting'
import { tranlistTotreeData } from '@/utils'
export default {
  data() {
    return {
      activeName: 'first',
      page: 1, // 页码数
      pagesize: 10, // 页面条数
      total: 0, // 页面总条数
      tableData: [], // 员工列表数据
      dialogVisible: false, // 权限节点对话框
      dialogTableVisible: false, // 对话框显示隐藏
      form: {}, // 角色收集数组
      formLabelWidth: '120px', // 表单标题长度
      formDate: {}, // 公司表单
      title: '', // 对话框标题
      rules: { // 校验规则
        name: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' }
        ]
      },
      data: [], // 权限列表
      defaultData: [], // 默认选中的权限数组
      roleId: null, // 权限分配的id
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    // 获取员工数据列表
    this.getgetrolesFn()
    // 获取公式信息
    this.getcompanyFn()
    // if (this.activeName === 'second') {
    // } else {

    // }
  },
  methods: {
    headerClass() { // 表头样式方法
      return 'text-align: center; background-color: #f5f7fa;'
    },
    cellClass() { // 表格主体样式方法
      return 'text-align: center;'
    },
    async getgetrolesFn() { // 请求角色列表数据方法
      this.formDate = {}
      const res = await getrolesAPI({
        page: this.page,
        pagesize: this.pagesize
      })
      // 把接收回来的数据赋值给 哦我们的员工列表变量
      this.tableData = res.rows
      this.total = res.total
    },
    reomveFn(data) { // 删除角色方法
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await removeroleAPI(data.id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 重新渲染数据
        this.getgetrolesFn()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async addFn() { // 添加角色方法
      this.dialogTableVisible = true
      this.title = '添加角色'
      // const res = await addroleAPI()
    },
    submitFn() { // 确定方法
      this.$refs.form.validate(async(vaild) => {
        if (vaild) {
          if (this.form.id) {
            // 编辑完成
            await updataroleAPI(this.form)
            this.updataFn()
          } else {
            await addroleAPI(this.form)
            this.updataFn()
          }
        } else {
          return ''
        }
      })
    },
    async setFn(data) { // 编辑角色方法
      this.form = await getrolrAPI(data.id)
      this.dialogTableVisible = true
      this.title = '编辑角色信息'
    },
    cancleFn() { // 取消方法
      if (this.title !== '角色权限分配') {
        // 清空对象
        this.form = {}
        // 关闭表单
        this.dialogTableVisible = false
        // 对表单重置
        this.$refs.form.resetFields()
      } else {
        this.dialogVisible = false
      }
    },
    currentFn(val) {
      this.page = val
      // 重新渲染角色数据列表
      this.getgetrolesFn()
    },
    async getcompanyFn() { // 获取公司数据列表
      this.formDate = await companyAPI(this.$store.getters.companyId)
    },
    updataFn() { // 页面数据更新添加方法
      // 前端数据回响
      this.getgetrolesFn()
      this.dialogTableVisible = false
      if (this.form.id) {
        // 提示
        this.$message({
          showClose: true,
          message: '更新角色成功',
          type: 'success'
        })
      } else {
        this.$message({
          showClose: true,
          message: '添加角色成功',
          type: 'success'
        })
      }
      // 清空表单数据
      this.form = {}
    },
    async callotFn(id) { // 分配权限的方法
      const res = await permissionAPI(id)
      // 遍历树形数组
      this.data = tranlistTotreeData(res, '0')
      this.roleId = id
      const { permIds } = await getrolrAPI(id)
      this.defaultData = permIds
      this.title = '角色权限分配'
      // 开启对话框
      this.dialogVisible = true
    },
    async footerFn() {
      await assignPremAPI({
        id: this.roleId,
        permIds: this.$refs.Eltree.getCheckedKeys()
      })
      this.$message.success('角色权限分配成功')
      this.cancleFn()
    }
  }
}
</script>

<style>
</style>

